<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="./css/bulma.min.css"/>
</head>


<body>

    <li-bookcase
        src-cover="https://img.zcool.cn/community/011e43593b7753a8012193a3a7b1bd.jpg@1280w_1l_2o_100sh.jpg"
        book-name="书名"
        author-name="作者名"
        progress="第一章"
        latest="第二章"
    >
    <!--
        <label slot="book-name">再见光年</label>
        <label slot="author-name">小白鸽</label>
        <label slot="progress">第一章</label>
        <label slot="latest">第二章</label>
    -->
    </li-bookcase>
    <li-bookcase
        src-cover="https://img.zcool.cn/community/011e43593b7753a8012193a3a7b1bd.jpg@1280w_1l_2o_100sh.jpg"
        book-name="书名"
        author-name="作者名"
        progress="第一章"
        latest="第二章"
    >
    </li-bookcase>


    <footer>
        <tabs-bottom>
            <tabs-bar>
                bar1
            </tabs-bar>
            <tabs-bar>
                bar2
            </tabs-bar>
        </tabs-bottom>
    </footer>


    <style>
        footer {
            position: absolute;
            width: 100%;
            left: 50%;
            bottom: 0%;
            transform: translateX(-50%);
            align-content: center;
            justify-content: center;
            align-items: center;
        }
    </style>

    <script src="component/div_row.js"></script>
    <script src="component/div_column.js"></script>
    <script src="component/li_bookcase.js"></script>
    <script src="component/tabs/tabs.js"></script>
    <script src="component/tabs/tabs-bar.js"></script>
</body>


</html>


